<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select name="province" id="province"></select>
    <select name="city" id="city"></select>
    <select name="country" id="country"></select>

    <script>

     // 省份数组
      var provinceArr = ['上海', '江苏', '河北'];
      // 城市数组
      var cityArr = [
        ['上海市'],
        ['苏州市', '南京市', '扬州市'],
        ['石家庄', '秦皇岛', '张家口']
       ];
      // 区域数组
      var countryArr = [
        [
          ['黄浦区', '静安区', '长宁区', '浦东区']
        ], [
          ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
          ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
          ['邗江区', '广陵区', '江都区']
        ], [
          ['长安区', '桥西区', '新华区', '井陉矿区'],
          ['海港区', '山海关区', '北戴河区', '抚宁区'],
          ['桥东区', '桥西区', '宣化区', '下花园区']
        ]
      ];

      let province=document.getElementById('province');
      let city=document.getElementById('city');

      for(let i=0;i<provinceArr.length;i++){
          let option =new Option(provinceArr[i],i);
          province.Options.add(option);
      }

province.onchange = function(e){
    console.log(province.value);

    let city = cityArr[province.value];
    for(let i=0;i<citys.length;i++){
        let option = new Option(citys[i],i);
        city.options.add(option);
    }
    city.onchange=function(e){
        let countrys = countryArr[province.value][city.value];
    }
}




    let province=document.getElementById('province');
    let option=new Option("上海");
    let option2=new Option('江苏');
    province.options.add(option);
    province.options.add(option2);
    </script>
</body>
</html>